<template>
  <div class='wrapper'>
    <!-- header部分 -->
    <div style="height: 15vw;">
      <header>
        <p>我的信息</p>
      </header>
    </div>
    <ul class="user-information" style="margin-top: 10%;margin-bottom: 10%;">
      <li>
        <div class="user-information-img" style="margin-right: 5%;">
          <img src="../assets/userImg/userImg.png">
        </div>
        <div class="user-information-info">
          <h3>{{user.userName}}</h3>
          <p>{{user.userId}}</p>
          <p>{{showSex(user.userSex)}}</p>
        </div>
      </li>
    </ul>

    <div class="logout-and-merchant">
      <div class="merchant" @click="checkMerchantStatus">我是商家</div>
      <div class="logout" @click="logOut">退出登录</div>
    </div>
    <!--底部菜单部分-->
    <Footer></Footer>
  </div>
</template>

<script>
import { ref } from 'vue';
import Footer from '../components/Footer.vue';
import { getSessionStorage } from '@/common';
import { useRouter } from 'vue-router';
import axios from 'axios';
import qs from 'qs';

export default {
  name: 'Information',
  components: { Footer },
  setup() {
    const router = useRouter();
    const user = ref(getSessionStorage('user'));

    const logOut = () => {
      sessionStorage.removeItem('user');
      router.push({ path: '/login' });
    };

    const showSex = (userSex) => (userSex === 1 ? '男' : '女');

    const checkMerchantStatus = () => {
      axios.post("/MerchantController/checkMerchantStatus", qs.stringify({ userId: user.value.userId }))
        .then((response) => {
          const { isMerchant, businessId } = response.data;
          if (isMerchant) {
            router.push({ path: "/merchant/manage", query: { businessId } });
          } else {
            router.push({ path: "/merchant/register" });
          }
        })
        .catch((error) => {
          console.error("获取商家状态失败", error);
        });
    };

    return { user, showSex, logOut, checkMerchantStatus };
  }
}
</script>

<style scoped>
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .user-information li {
  display: flex;
  justify-content: center;
}

.wrapper .user-information li .user-information-img img {
  border-radius: 100px;
}

.wrapper .user-information li .user-information-info {
  margin-left: 8vw;
}

.wrapper .user-information li .user-information-info h3 {
  font-size: 6vw;
  color: #555;
}

.wrapper .user-information li .user-information-info p {
  font-size: 6vw;
  color: #888;
  margin-top: 2vw;
}

.logout-and-merchant {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10%;
  margin-bottom: 20%;
}

.merchant {
  background-color: #FF9800;
  width: 80%;
  text-align: center;
  padding: 5%;
  border-radius: 10px;
  font-size: 5vw;
  color: white;
  cursor: pointer;
}

.logout {
  background-color: red;
  width: 80%;
  text-align: center;
  margin-top: 5%;
  height: 8vw;
  border-radius: 10px;
  font-size: 5vw;
  line-height: 8vw;
  color: white;
}
</style>